<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>角色表</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{../layui/css/layui.css}" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>

<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
     <button class="layui-btn layui-btn-sm" lay-event="userAdd">添加</button>
  </div>
</script>

<!-- 分页组件 -->
<div>
    <div id="page_container"></div>
</div>

<script>
layui.use(['table','layedit','form','laydate'], function(){
	  var table = layui.table
	  var layedit = layui.layedit
	  ,$ = layui.jquery;
	  var form = layui.form   //form表单
	  var index = layedit.build("textarea", "content");
	  var laydate = layui.laydate //日期 
	 
	  //头工具栏事件
	  table.on('toolbar(test)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'userAdd':
	    	  layer.open({
	  			type:1,
	  			title:'添加角色',
	  			area: ['1100px', '850px'],
	  			anim: 0,
	  			skin: 'layui-layer-molv',
	  			content:layui.$('#add')
	  		});
	      break;
	    };
	  });
		
	  laydate.render({   //添加时的日期选择
			elem: '#birthday'
		  });
		  
 	  
//执行一个 table 实例
	table.render({
	  elem: '#demo'
	  ,height: 'full-210'
	  //,cellMinWidth: 50
	  ,url: 'roleList' //数据接口
	  ,even:true	
	  ,page: true
	  //,title: '新闻表'
	  ,limit:20
	  ,toolbar:'#toolbarDemo'  //开启工具栏
	  ,cols: [
		  [ //表头
		 {type: 'checkbox', title: '全选'}	  
		,{type: 'numbers', title: '序号'}	  
	    ,{field: 'rname', title: '角色'}
	    ,{field: 'detail', title: '角色描述', width:340}
	    ,{field: 'pname', title: '权限', width:120}
	    ,{field: 'perDetail', title: '权限描述', width:340}
	    ,{field: 'state', title: '用户状态',width:100}
	    ,{fixed: 'right', title:'操作', toolbar: '#barDemo',width:260}
	 	 ]
		]
	});
	});
</script>


<!------------------------------------------------ 添加 --------------------------------------------------->
<form id="add" class="layui-form" action="roleAdd" lay-filter="example" method="post" hidden="true">
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-block">
      <input type="text" name="rname" lay-verify="title" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色描述</label>
    <div class="layui-input-block">
      <input type="text" name="detail" placeholder="请输入角色描述" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">权限</label>
    <div class="layui-input-block">
      <select name="rpid" lay-filter="dept">
 		<option th:each="permission,userStat:${rolePermissions}" th:value="${permission.rpid}" th:text="${permission.pname}"></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" >角色状态</label>
    <div class="layui-input-block">
      <select name="rsid" lay-filter="aihao">
        <option value="1">正常</option>
        <option value="2">禁止</option>
      </select>
    </div>
  </div> 
   <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


 <!------------------------------------------------ 修改 ----------------------------------------------------->
<form id="update" class="layui-form" action="roleEdit" lay-filter="updateData" method="post" hidden="true">
  <input type="hidden" name="rid" >
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-block">
      <input type="text" name="rname" lay-verify="title" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色描述</label>
    <div class="layui-input-block">
      <input type="text" name="detail" placeholder="请输入角色描述" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">权限</label>
    <div class="layui-input-block">
      <select name="rpid" lay-filter="dept">
 		<option th:each="permission,userStat:${rolePermissions}" th:value="${permission.rpid}" th:text="${permission.pname}"></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" >用户状态</label>
    <div class="layui-input-block">
      <select name="rsid" lay-filter="aihao">
        <option value="1">正常</option>
        <option value="2">禁止</option>
      </select>
    </div>
  </div> 
 <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs" lay-event="permissionManage">权限管理</a>
</script>

<script type="text/javascript" th:inline="javascript">  //用javascript获取model中数据
layui.use(['table', 'form', 'layedit', 'laydate'], function(){
	  var form = layui.form   //form表单
	  ,layer = layui.layer  //弹出层
	  ,layedit = layui.layedit  //文字编辑器
	    var a = [[${data}]]
	  ,laydate = layui.laydate;  //日期 
	  
	  //日期
	  laydate.render({   //添加时的日期选择
	    elem: '#date1'
	   	,theme: 'molv'
	   	,value: new Date  //默认为当时时间
	  });
	  laydate.render({   //修改时的日期选择
		elem: '#date2'
	  });
	
  var table = layui.table;
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data;
    var rid = data.rid;
    
	 if(obj.event === 'update'){
    	//layer.alert(JSON.stringify(data));
    	//1.获取这行数据
    	//2.填充form
    	form.val("updateData",data);   
    	layer.open({
    		type:1,
			title:'修改新闻信息',
			area:'800px',
			anim: 1,
			skin: 'layui-layer-lan',
			content:layui.$('#update'),	
    	}) 
    } else if(obj.event === 'del'){
      layer.confirm('删除后不可恢复,是否继续?', function(index){
    	  layui.$.ajax({
              url: "roleDelete",
              type: "POST",
              data:{"rid":data.rid},
              dataType: "json",                
              success: function(data){            
              if(data==null){    
                 layer.msg("删除失败");                        
              }else{ 
                  layer.msg("删除成功");   
                  obj.del();
                  }
              },
              error:function(){
            	  layer.closeAll();
                  parent.location.reload();
                  Load(); //删除完需要加载数据
                  //tableObj.reload(options); //重载表格
              },
    	  });
      });
    }else if(obj.event === 'permissionManage'){
    	window.open("../RolePermission/index?rid="+rid+"","_self")
    };
  });
});
</script>
</body>
</html>